﻿<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name='author' content='Federico Alberto Gonzalez' />
		<title>Administrador de Tareas - UFASTA</title>
			
<!-- Page styles-->
		<link type="text/css" rel="stylesheet" href="/stylesheets/cssReset.css" /> 
		<link type="text/css" rel="stylesheet" href="/stylesheets/{{theme}}" />
		<link type="text/css" href="/stylesheets/jquery-ui-1.8.18.custom.css"  rel="stylesheet">
		<link type="text/css" href="stylesheets/liquid-slider-0.1.css"  rel="stylesheet"/>
		<link type="text/css" href="stylesheets/jMonthCalendar.css" rel="stylesheet" />
		<link type="text/css" href="stylesheets/timePicker.css" rel="stylesheet" />
		 
<!-- Librerias -->		
		<!-- jQuery  -->
		<script language="javascript" type="text/javascript" src="/js/jquery-1.8.1.min.js"></script> 
		<!-- Ventanas Modales -->
		<script language="javascript" type="text/javascript" src="/js/jquery.simplemodal.1.4.2.min.js"></script> 
		<!-- DateTime Picker  -->
		<script language="javascript" type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
		<script language="javascript" type="text/javascript" src="/js/jquery.timePicker.min.js"></script>
		<!-- Da formato a las fechas -->
		<script language="javascript" type="text/javascript" src="/js/date.format.js"></script> 		
		<!-- Time Picker -->        
		<script language="javascript" type="text/javascript" src="/js/jquery.ui.datepicker-es.js"></script>
		<!-- Validaciones -->
		<script language="javascript" type="text/javascript" src="/js/jquery.validate.min.js"></script>
		<script language="javascript" type="text/javascript" src="/js/messages_es.js"></script>
		<!-- Main Funciones Personales -->
		<script language="javascript" type="text/javascript" src="/js/at-main.js"></script>
		<!-- Coda Slider - Paneles Dinamicos -->
		<script language="javascript" type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
		<script language="javascript" type="text/javascript" src="/js/jquery.liquid-slider-0.1.min.js"></script>
		<!-- Calendario mensual con eventos que muestra las tareas con deadline -->
		<script language="javascript" type="text/javascript" src="js/jMonthCalendar.js" ></script>
		<script type="text/javascript">
		function getCalendar() {
  			var options = {
				height: 450,
				width: 680,
				navHeight: 25,
				labelHeight: 25,
				containerId: "#jMonthCalendar",
				onMonthChanging: function(dateIn) {
					return true;
				},
				onEventLinkClick: function(event) { 
					event.preventDefault();
					return true; 
				},
				onEventBlockClick: function(event) { 
					alert(event.Title);
					event.preventDefault();
					return true; 
				},
				onEventBlockOver: function(event) {
					return true;
				},
				onEventBlockOut: function(event) {
					return true;
				},
				onDayLinkClick: function(date) { 
					alert(date.toLocaleDateString());
					event.preventDefault();
					return true; 
				},
				onDayCellClick: function(date) {
					event.preventDefault(); 
					return true; 
				}
			};
			
			
			var events = [
							{% for aTarea in tareasConVencimiento %}
								 { "EventID": {{forloop.counter}}, "Date": new Date({{aTarea.getVencimiento.year}}, {{aTarea.getVencimiento.month|add:"-1"}}, {{aTarea.getVencimiento.day}}), "Title": "{{aTarea.getAsunto}}"}, 								 
							{% endfor %}
				];
			
			//$.jMonthCalendar.Initialize(newoptions, newevents);

			
			$.jMonthCalendar.Initialize(options, events);

  	};
		</script>

</head>

<body>
	<div id="top">	
		<div id="User_links">
			<label> {{ user.getEmail }}</label>
			<a id="Configuracion_link" href=""> Configuración </a> <br>
			<a id="Imprimir" href="/print" title="Imprimir lista de Tareas pendientes"> Imprimir </a> <br>
			<a id="a_logout" href="/logout"> Logout! </a> <br>
		</div>
	</div>
	
	<div id="left">	
		<br>
		<ul>
		<li> <a id="newtask_link" class="Panellinks" href=""> Nueva Tarea </a> </li> <br> 
		<li> <a id="CambiarEstado_link" class="Panellinks" href=""> Finalizar </a> </li> <br>
		<li> <a id="CompartirTarea_link" class="Panellinks" href=""> Compartir </a>  </li> <br> 
		<li> <a id="modificarTarea_link" class="Panellinks" href=""> Modificar </a> </li> <br>
		<li> <a id="eliminarTarea_link" class="Panellinks" href=""> Eliminar </a> </li> <br>
		<li> <a id="posponerTarea_link" class="Panellinks" href=""> Posponer </a>  </li> <br>
		<li> <a title="Imprimir Tarea Seleccionada" id="imprimirTarea_link" class="Panellinks" href=""> Imprimir  </a> </li> <br>
		<li> <a id="Calendario_link" class="Panellinks" onclick='check()' href=""> Calendario </a>  </li>
		</ul>  
	</div>
	
<div id="main">
	<noscript>
		<div>
        	<p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
        		<ol>
            	<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>
            	<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>
       		</ol>
    	</div>
	</noscript>
	

		<div class="liquid-slider"  id="slider-id">
        	<section>
          <h2 class="title">Todas</h2> <br>
          {% for tarea in lista_tareas %}
					<div id="{{forloop.counter}}" class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}"  onmouseover='detalle2("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}","{{forloop.counter}}")' onmouseout='clean("{{tarea.key}}","{{forloop.counter}}","{{tarea.estaVencida}}")' onclick='marcar2("{{tarea.key}}","{{forloop.counter}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
		  {% endfor %}
        </section>
        	<section>
          <h2 class="title">Trabajo</h2>  <br>
			{% for tarea in lista_trabajo %}
					<div id='{{tarea.key}}' class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}" onmouseover='detalle("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}")' onmouseout='clean("{{tarea.key}}","Nothing","{{tarea.estaVencida}}")' onclick='marcar("{{tarea.key}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
			{% endfor %}          
        	</section>          
        	<section>
          <h2 class="title">Personal</h2> <br>
          {% for tarea in lista_personal %}
					<div id="{{tarea.key}}" class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}" onmouseover='detalle("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}")' onmouseout='clean("{{tarea.key}}","Nothing","{{tarea.estaVencida}}")' onclick='marcar("{{tarea.key}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
		   {% endfor %}
        </section>
        	<section>
          <h2 class="title">Estudio</h2> <br>
			{% for tarea in lista_estudio %}
					<div id="{{tarea.key}}" class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}" onmouseover='detalle("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}")' onmouseout='clean("{{tarea.key}}","Nothing","{{tarea.estaVencida}}")' onclick='marcar("{{tarea.key}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
			{% endfor %}          
        </section>
        	<section>
          <h2 class="title">Bandeja de Entrada</h2> <br>
          {% for tarea in lista_buzon %}
					<div id="{{tarea.key}}" class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}" onmouseover='detalle("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}")' onmouseout='clean("{{tarea.key}}","Nothing","{{tarea.estaVencida}}")' onclick='marcar("{{tarea.key}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
		  {% endfor %}
        </section>
        	<section>
          <h2 class="title">Enviadas</h2> <br>
          {% for tarea in lista_enviadas %}
					<div id='{{forloop.counter|add:"50"}}' class="task_lister {% if tarea.estaVencida %}tarea_vencida{% endif %}" onmouseover='detalle2("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}","{{forloop.counter|add:"50"}}")' onmouseout='clean("{{tarea.key}}","{{forloop.counter|add:"50"}}")' onclick='marcar2("{{tarea.key}}","{{forloop.counter|add:"50"}}","{{tarea.estaVencida}}","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
			{% endfor %}
        </section>
        	<section>
          <h2 class="title">Completadas</h2> <br>
          {% for tarea in lista_completadas %}
					<div id="{{tarea.key}}" class="task_lister" onmouseover='detalle("{{tarea.getEstado}}","{{tarea.getPrioridad}}","{{tarea.getCategoria}}","{{tarea.getVencimiento}}","{{tarea.getDuracion}}","{{tarea.getPospuesta}}","{{tarea.getFechaCreacion}}","{{tarea.getNotas}}","{{tarea.key}}")' onmouseout='clean("{{tarea.key}}")' onclick='marcar("{{tarea.key}}","False","{{tarea.getVencimiento}}")'> {{ tarea.getAsunto }} </div>
			{% endfor %}
        	</section>        
      	</div>

 <div id="detalles_tareas" class="info_tareas">
	<h3> Detalles: </h3>
	<br>
	<div class="info">Estado:     </div> <div id="info_estado" class="detalles"> </div>  <br> 
	<div class="info">Prioridad:   </div> <div id="info_prioridad" class="detalles"> </div> <br>
	<div class="info">Categoria:   </div> <div id="info_categoria" class="detalles"> </div> <br>
	<div class="info">Vencimiento: </div> <div id="info_vencimiento" class="detalles detallesvenc"> </div> <br>
	<div class="info">Duracion:    </div> <div id="info_duracion" class="detalles"> </div> <br>
	<div class="info">Pospuesta:   </div> <div id="info_pospuesta" class="detalles"> </div> <br>
	<div class="info">Fecha Creacion </div> <div id="info_fechacreacion" class="detalles"> </div> <br>
	<div class="info">Notas:       </div> <textarea id="info_notas" value="" rows="4" cols="18" readonly="readonly"></textarea>
</div> 


    <div id="Creditos">
		<center>
		<br>
		2012 - Federico Alberto Gonzalez - Universidad FASTA <br>
		<img src="https://developers.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
		</center>
	</div>

</div> <!-- MAIN -->



	<div id="newTask_modalContent">
		<h3>Crear Nueva Tarea</h3> <br>
		<form id="f_newtask" action="/nueva_tarea" method="post" accept-charset="utf-8">
			<p id="taskContent_asunto" class="task_contener">
				<label for="task_Asunto" class="labelsform"><em>*</em>Asunto:</label>
				<input type="text" id="task_Asunto" name="task_Asunto" value="" size=72>
			</p><br>
			<p id="taskContent_categoria" class="task_contener">
				<label for="task_categoria" class="labelsform"><em>*</em>Categoria:</label>
				<select id="task_categoria" name="task_categoria">
					<!--  <option value="Bandeja de Entrada">Bandeja de Entrada</option>  -->
					<option value="Trabajo">Trabajo</option>
					<option value="Estudio">Estudio</option>
					<option value="Personal">Personal</option>
				    <!-- <option value="Enviadas">Enviadas</option>   -->
				</select>
			</p><br>
			<p id="taskContent_prioridad" class="task_contener">
				<label for="task_Prioridad" class="labelsform" >Prioridad:</label>
				<input type="radio" id="task_Prioridad0" name="task_Prioridad" value=0 title="Normal" checked="checked"  />Normal
				<input type="radio" id="task_Prioridad1" name="task_Prioridad" value=1 title="Media"/>1
				<input type="radio" id="task_Prioridad2" name="task_Prioridad" value=2 title="Alta"/>2
				<input type="radio" id="task_Prioridad3" name="task_Prioridad" value=3 title="Urgente"/>3
			</p>
			<div id="taskContent_notas" class="task_contener">
				<label id="l_notas" for="task_notas" class="labelsform" >Notas:</label>
				<textarea id="task_notas" name="task_notas" value="" rows="11" cols="25"></textarea>
			</div> <br>
			<p id="taskContent_vencimiento">
				<label for="task_Vencimiento" class="labelsform">Vencimiento:</label>
				<input type="text" name="task_Vencimiento" id="task_Vencimiento" value="" style ="text-align:right;" />
			</p> <br>
      		<p id="taskContent_tiempoest">
      			<label id="l_tiempoEst" title="Tiempo Estimado" class="labelsform">Duracion:</label>
      			<input type="text" name="task_TiempoEst" value="" title="Tiempo Estimado" style ="text-align:right;" id="task_TiempoEst" >
      			<img src="/imgs/DateTimePicker/clock.png" alt="" border="0" style="position:absolute; margin:4px 0 0 1px;" id="clock"/>
      		</p>
      		<br>
      		<label id="l_recfields">*Campos Obligatorios</label>
      		<hr>
      		<a id="submit_task" onclick="submitForm('f_newtask',1)" href="javascript:n()">Crear</a>
			<div id="error_div1" class="error_div">
			<ul id="errors"></ul>	
			</div>
		</form>
 	</div> <!-- Div Nueva Tarea - New_task Modal Content -->
 	
 	<div style="display:none">
 		<form id="f_imprimir" action="/print" method="post">
 			<input type="text" id="tarea_aImprimir" name="tarea_aImprimir" style="display:none">
 		</form>
 	</div>
 	
 	<div id="PosponerTarea_modalContent" style="display:none">
 		<form id="f_posponer" action="/posponer_tarea" method="post">
 			<input type="text" id="tarea_aPosponer" name="tarea_aPosponer" style="display:none">
 			<input type="text" id="venc_aPosponer" name="venc_aPosponer" style="display:none">
 		</form>
 	</div>
 	
 	
 	<div style="display:none"> <!-- Lo utiliza la funcion para marcar y desmarcar tareas al seleccionarlas -->
 		<input type="text" id="id_task" style="display:none">
 		<input type="text" id="id_task_vencida" style="display:none">
 		<input type="text" id="selectedTask_vencida" style="display:none">
 	</div>
 	
 	<div id="CambiarEstado_modalContent" style="display:none">
 		<form id="f_cambiarEstado" action="/cambiar_estado" method="post">
				<h4 id="h4_cambEstado" class="modal_h4">¿Está seguro de que de desea finalizar ésta tarea? </h4>
				<input type="text" id="tarea_aCambiarEstado" name="tarea_aCambiarEstado" style="display:none">
				<br>
				<div id="oper_links3" >
				<a onclick="submitForm('f_cambiarEstado')" href="javascript:n()">Si</a> | 
				<a  class="simplemodal-close" href="javascript:n()">No</a>
				</div>
		</form>
 	</div>
 	
 	<div id="EliminarTarea_modalContent" style="display:none">
 		<form id="f_eliminarTarea" action="/eliminar_tarea" method="post" >
 			<h4 class="modal_h4">¿Está seguro de que de desea eliminar ésta tarea? </h4>
 			<input type="text" id="tarea_aEliminar" name="tarea_aEliminar" style="display:none">
 			<br>
 			<div id="oper_links2" >
				<a onclick="submitForm('f_eliminarTarea')" href="javascript:n()">Si</a> | 
				<a  class="simplemodal-close" href="javascript:n()">Cancelar</a>
			</div>
 		</form>
 	</div>
 	
 	
 	<div id="CompartirTarea_modalContent" style="display:none">
 		<form id="f_compartirTarea" action="/compartir_tarea" method="post" accept-charset="utf-8">
 			<label> Ingrese Email del usuario destinatario: </label>
			<input type="text" id="tarea_aCompartir" name="tarea_aCompartir"  style="display:none">
 			<input type="text" id="user_email" name="user_email" value="" size=42 >
 			<br><br><br>
 			<div id="oper_links" >
				<a onclick="submitForm('f_compartirTarea',3)" href="javascript:n()">Compartir</a> | 
				<a  class="simplemodal-close" href="javascript:n()">Cancelar</a>
			</div>
			<div id="error_div3">
			<ul id="errors"></ul>	
			</div>
 		</form>
 	</div>
 	
 	<div id="ConfiguracionTema_modalContent" style="display:none">
			<form id="f_Configuracion" action="/cambiar_tema" method="post" accept-charset="utf-8">
				<label class="modal_h4">Elige un Tema:</label>
				<select id="theme" name="theme">
					<option value="index.css">Default</option>
					<option value="verde.css">Verde</option>
					<option value="femenino.css">Femenino</option>
				</select>
				<div id="oper_links2">
                	<a onclick='submitForm("f_Configuracion")' href="javascript:n()" >Guardar</a> | 
                	<a class="simplemodal-close" href="javascript:n()">Cancelar</a>
				</div>
			</form>
		</div>	
 	
 	<div id="modificarTarea_modalContent">
		<h3>Modificar Tarea</h3> <br>
		<form id="f_modificartarea" action="/modificar_tarea" method="post" accept-charset="utf-8">
			<p id="taskContent_asunto2" class="task_contener">
				<label for="task_Asunto" class="labelsform"><em>*</em>Asunto:</label>
				<input type="text" id="task_Asunto2" name="task_Asunto2" value="" size=72>
			</p><br>
			<p id="taskContent_categoria2" class="task_contener">
				<label for="task_categoria" class="labelsform"><em>*</em>Categoria:</label>
				<select id="task_categoria2" name="task_categoria2">
					<!--  <option value="Bandeja de Entrada">Bandeja de Entrada</option>  -->
					<option value="Trabajo">Trabajo</option>
					<option value="Estudio">Estudio</option>
					<option value="Personal">Personal</option>
				    <!-- <option value="Enviadas">Enviadas</option>   -->
				</select>
			</p><br>
			<p id="taskContent_prioridad2" class="task_contener">
				<label for="task_Prioridad" class="labelsform" >Prioridad:</label>
				<input type="radio" id="prioridad_rb0" name="task_Prioridad2" value=0 title="Normal" checked="checked"  />Normal
				<input type="radio" id="prioridad_rb1" name="task_Prioridad2" value=1 title="Media"/>1
				<input type="radio" id="prioridad_rb2" name="task_Prioridad2" value=2 title="Alta"/>2
				<input type="radio" id="prioridad_rb3" name="task_Prioridad2" value=3 title="Urgente"/>3
			</p>
			<div id="taskContent_notas2" class="task_contener">
				<label id="l_notas2" for="task_notas" class="labelsform" >Notas:</label>
				<textarea id="task_notas2" name="task_notas2" value="" rows="11" cols="25"></textarea>
			</div> <br>
			<p id="taskContent_vencimiento2">
				<label for="task_Vencimiento" class="labelsform">Vencimiento:</label>
				<input type="text" name="task_Vencimiento2" id="task_Vencimiento2" value="" style ="text-align:right;" />
			</p> <br>
      		<p id="taskContent_tiempoest2">
      			<label id="l_tiempoEst2" title="Tiempo Estimado" class="labelsform">Duracion:</label>
      			<input type="text" name="task_TiempoEst2" value="" title="Tiempo Estimado" style ="text-align:right;" id="task_TiempoEst2" >
      			<img src="/imgs/DateTimePicker/clock.png" alt="" border="0" style="position:absolute; margin:4px 0 0 1px;" id="clock2"/>
      		</p>
      		<br>
      		<label id="l_recfields2">*Campos Obligatorios</label>
      		<hr>
      		<a id="submit_task2" onclick="submitForm('f_modificartarea',2)" href="javascript:n()">Guardar</a>
			<div id="error_div2" class="error_div">
			<ul id="errors"></ul>	
			</div>
			<input type="text" id="tarea_aModificar" name="tarea_aModificar" style="display:none">
		</form>
 	</div>
 	
 	<div id="browserIE" style="display:none; width:100%; height:100%;">
 				<p>Su Navegador Web no soporta las carecterisitcas de esta pagina.</p>
        		<ol>
            	<li>Le recomendamos descargar y usar gratuitamente Google Chrome o Firefox</li>
       		</ol>
    </div>
    	
 	<div id="jMonthCalendar" class="calendar_dialog"></div>
 	
</body>
</html>